<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <ul>
    <li>AAAAA</li>
    <li class="box">CCCCC</li>
    <li title="hello"><span>BBBBB</span></li>
    <li title="hello"><span>DDDD</span></li>
    <span>EEEEE</span>
  </ul>
  <!-- 
    层次选择器：查找子元素，后代元素，兄弟元素的选择器
    1.ancestor descendant
    在给定的祖先元素下匹配所有的后代元素
    2.parent > child
    在给定的父元素下匹配所有的子元素
    3.prev + next
    匹配所有紧接在prev元素后的next元素
    4.prev ~ siblings(兄弟)
    匹配prev元素之后的所有siblings元素
   -->
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.js"></script>
  <script>
    $(function () {
      // 需求一 选中ul下所有的span
      // $('ul span').css({
      //   background: 'yellow'
      // })

      // 需求二 选中ul下所有的子元素span
      // $('ul>span').css({
      //   background: 'yellow'
      // })

      // 需求三 选中class为box的下一个li
      // $('.box+li').css({
      //   background: 'yellow'
      // })

      // 需求四 选中ul下的class为box的元素后面的所有兄弟元素
      $('ul .box~*').css({
        background: 'yellow'
      })
    })
    
  </script>
</body>
</html>